<style lang="scss" scoped>
.doc {
    background: #f3f1f1;
}

.header {
    width: 100%;
    height: 2rem;
    line-height: 2rem;
    font-size: 0.83rem;
    font-weight: 400;
    background-color: rgba(243, 220, 169, 0.849);
    color: rgba(86, 62, 7, 0.849);
    padding-left: 1.5rem;
    position: relative;

    span {
        position: absolute;
        right: 1rem;
    }
}

.zhuye {
    width: 95%;
    height: 13rem;
    padding: 0.625rem;
    background: white;
    margin: 0.625rem;

    .top {
        width: 100%;
        display: flex;

        .left {
            width: 77%;

            .name {
                font-size: 0.88rem;
                font-weight: 400;
            }

            .hospital {
                font-size: .88rem;
                font-weight: 400;
                margin: .5rem 0;

                span {
                    font-size: 1rem;
                    color: #ccc;
                }
            }

            .pingfen {
              width: 100%;
              
                height: 1.3rem;
                line-height: 1.25rem;
                position: relative;
                 
                .sz{
                
                  img{
                    width: 15px;
                    height: 15px;
                  }
                }
                .jz{
                  margin-left: 10px;
                }
                .thang{
                  margin-left: 10px;
                }
            }   
        }

        .right {
            width: 5rem;

            img {
                width: 60px;
                height: 60px;
                border-radius: 50%;
                border: .0625rem solid #ccc;
                margin-left: 10px;
            }

            .gz {
                width: 3.9rem;
                background-color: rgb(213, 247, 222);
                color: rgb(27, 211, 150);
                font-size: 15px;
                text-align: center;
                border-radius: 1.5rem;
                margin-left: .6rem;
                position: absolute;
                
            }
        }
    }

    .bottom {
        width: 80%;
        display: flex;
        flex-wrap: wrap;
        position: absolute;
       left: 10px;
        margin-top: 13px;
        div {
            font-size: .88rem;
            margin: 3.8px;
            background: #e4eef4;
            color: rgb(44, 116, 224);

            padding: .3rem;
        }
    }
}

.p1 {
    display: flex;
    justify-content: space-around;

    span {
        color: #ccc;
        font-size: .88rem;
    }
}

.grid {
   display: flex;
    text-align: center;
     width: 100%;
     height:120px;
     margin-top: 10px;
     background: #f00;
    dl {
         width: 100px;
          height: 100px;
       background: white;
        border-radius: 5px;
        margin-left: 5px;
      
        dt {
            margin-top: 10px;
            img {
                width: 30px;
                height: 30px;

            }
        }

   
    dl {
        padding: 1rem .625rem;
        background: white;
        border-radius: .3rem;

        dt {
            img {
                width: 2.5rem;
                height: 1.875rem;
            }
        }

        dd {
            .wenzhen {
                color: #ccc;
            }

            .jg {
                color: #ccc;
                font-size: .88rem;
            }
        }
    }
}

.wenzi {
    margin: 1rem .5rem;
    width: 95%;
    padding: 1rem .5rem;
    background: white;
}

.goodat {
  
    margin: 1rem .5rem;
    width: 95%;
    padding: .5rem;
    border-radius: .5rem;
  

    h3 {
        margin-bottom: 1rem;
    }

    div {
        width: 90%;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
}

.pingjia {
    background: white;
    margin: 1rem .5rem;
    width: 95%;
    padding: .5rem;
    border-radius: .5rem;

    .fenlei {
        width: 75%;
        height: 6rem;
        display: flex;
        flex-wrap: wrap;
        margin-left: -.5rem;

        div {
            padding: .5rem;
            font-size: .89rem;
            background: #f1eeee;
            margin: .3em;
        }
    }

    .userpingjia {
        div {
            h4 {
                span {
                    font-weight: normal;
                }

                .tu {
                    background: #e4eef4;
                    color: rgb(44, 116, 224);
                    font-size: .8rem;
                    margin-right: .3rem;
                }

                .wen {
                    background: #f3e4a3;
                    color: rgb(242, 45, 6);
                    font-size: .8rem;
                }

                .date {
                    position: absolute;
                    right: 1.5rem;
                    font-size: .85rem;
                    color: #ccc;
                }
            }

            p {
                display: flex;
                flex-wrap: wrap;

                span {
                    display: flex;
                    margin: .2rem .6rem;
                    color: #ccc;
                }

                .span::after {
                    width: 1rem;
                    height: .7rem;
                    margin-top: .3rem;
                    border-right: .0625rem solid #ccc;
                    content: "|";
                    color: transparent;
                }
            }

            .div {
                width: 95%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin: .5rem 0;
                
            }

            .wenti {
                padding: .6rem;
                background: #ebe8e8;
                color: #a09e9e;
                font-size: .93rem;
            }
        }
              background: #ebe8e8;
                color: #a09e9e;
                font-size: .93rem;
            }
 }
    }


.di {
    width: 100%;
    background-color: white;
    height: 50px;
    position: fixed;
    bottom: 0;
    text-align: center;
   
    height: 5rem;
    position: fixed;
    bottom: 0;
    text-align: center;

    button {
        width: 80%;
        height: 3rem;
        border-radius: 1.5rem;
        border: none;
        background: #31cd2c;
        color: white;
    }
}

</style>
<template>
    <div class="doc">
        <p class="header">已通过实名认证 ><span>执业资质已审核通过</span></p>
        <div class="zhuye">
            <div class="top">
                <div class="left">
                    <h2>{{ doctor.name }}</h2>
                    <p class="name">{{ doctor.clinic_name }} {{ doctor.title }}</p>
                    <p class="hospital">{{ doctor.hospital_name }}
                        <span>></span>
                    </p>
                    <p class="pingfen">
                     
                        <span class="sz"><b>{{ doctor.service_data_list[0].descrip }}</b><img :src="doctor.service_data_list[0].icon" alt=""></span>
                        <span class="jz">{{ doctor.service_data_list[1].name }}<b>{{ doctor.service_data_list[1].descrip }}</b></span>
                        <span class="thang">{{ doctor.service_data_list[2].name }} <b></b></span>
                        <span><b>{{ doctor.service_data_list[2].descrip }}</b></span>
                    </p>
                </div>
                <div class="right">
                    <img :src="doctor.image" alt="">
                    <div @click="gz" class="gz">
                        {{ flag ? '已关注' : '+关注' }}
                    </div>
                </div>
            </div>
            <div class="bottom">
                <div v-for="(item, index) in doctor.new_tags" :key="index">
                    {{ item.name }}
                </div>
            </div>
        </div>
        <p class="p1">
            <span>保证医生真实</span>
            <span>未使用随时退</span>
            <span>不满意可申诉</span>
        </p>
        <div class="grid">
            <dl @click="tuwen">
                <dt>
                    <img src="../../assets/img/zixun3.png" alt="">
                </dt>
                <dd>
                    <p>图文咨询</p>
                    <p class="jg">￥20元/次</p>
                </dd>
            </dl>
            <dl @click="tuwen1">
                <dt>
                    <img src="../../assets/img/zixun1.png" alt="">
                </dt>
                <dd>
                    <p>电话咨询</p>
                    <p class="jg">￥20元/次</p>
                </dd>
            </dl>
            <dl>
                <dt>
                    <img src="../../assets/img/zixun4.png" alt="">
                </dt>
                <dd>
                    <p class="wenzhen">视频问诊</p>
                    <p class="jg">暂未开通</p>
                </dd>
            </dl>
            <dl>
                <dt>
                    <img src="../../assets/img/zixun2.png" alt="">
                </dt>
                <dd>
                    <p class="wenzhen">预约就诊</p>
                    <p class="jg">暂未开通</p>
                </dd>
            </dl>
        </div>
        <div class="wenzi">
            <div v-if="!zixun">
                通过文字、图片、语音与医生一对一在线沟通
            </div>
            <div v-else>
                通过电话与医生进行选定时长的沟通，可添加病情资料与图片
            </div>
        </div>
        <div class="goodat">
            <h3>擅长与简介</h3>
            <div v-html="doctor.good_at"></div>
        </div>
        <div class="pingjia">
            <h3>患者评价</h3>
            <div class="fenlei">
                <div>阴道炎(135)</div>
                <div>流产(124)</div>
                <div>多囊卵巢综合症(69)</div>
                <div>盆腔炎(50)</div>
            </div>
            <div class="userpingjia">
                <div>
                    <h4>
                        173*******1
                        <span class="tu">图文</span>
                        <span class="wen">满意</span>
                        <span class="date">3月4日</span>
                    </h4>
                    <p>
                        <span class="span">
                            耐心细致
                        </span>
                        <span class="span">
                            讲解很清楚
                        </span>
                        <span class="span">
                            回复很及时
                        </span>
                        <span>
                            建议很有帮助
                        </span>
                    </p>
                    <div class="div">
                        张医生很好,很有耐心,爱心,是个值得信赖的好医生！
                    </div>
                    <div class="wenti">
                        问题描述：张医生，您好，我之前咨询过您。(女，31岁)
                    </div>
                </div>
                <div>
                    <h4>
                        180*******6
                        <span class="tu">图文</span>
                        <span class="wen">满意</span>
                        <span class="date">2月17日</span>
                    </h4>
                    <p>
                        <span class="span">
                            耐心细致
                        </span>
                        <span class="span">
                            讲解很清楚
                        </span>
                        <span class="span">
                            回复很及时
                        </span>
                        <span>
                            建议很有帮助
                        </span>
                    </p>
                    <div class="div">
                        医生很好,建议很有帮助,很有耐心,讲解详细，谢谢！
                    </div>
                    <div class="wenti">
                        问题描述:一直不孕,不知道什么原因,末次月经是上个月11号(女,26岁)
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="di">
        <button>图文咨询(￥20元/次)</button>
    </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
import { ref } from 'vue'
const route = useRoute()
const doctor = ref([])
const flag = ref(false)
const zixun = ref(true)

const gz = () => {
    flag.value = !flag.value
}

const tuwen = () => {
    zixun.value = false
}

const tuwen1 = () => {
    zixun.value = true
}

const item = JSON.parse(route.query.item)
console.log(item.doctor_info);

doctor.value = item.doctor_info
</script>
